function windowBase(){
	
	resizeWindow();
	prepareSearch();
	
	/*
	 * Show / Hide hidden Menu Items
	 */
	//$("#mainMenu").bind("mouseover", function(){
	//	$(".hiddenMenuItem").fadeIn("fast");
	//});
	//$("#mainMenu").bind("mouseleave", function(){
	//	$(".hiddenMenuItem").fadeOut("slow");
	//});
	
	/*
	 * Show / Hide Login Window
	 */
	$("#loginButton").bind("click", function(){
		$("#loginWindow").fadeIn("slow");		
	});
	$("#loginAbort").bind("click", function(){
		$("#loginWindow").fadeOut("fast");		
	});
	 
	/*
	 * Erase Login Credentials on focus
	 */
	$(".loginField").bind("focus", function(){
		this.value = "";		
	});
	
	/*
	 * Validate Login Information
	 */
	$("#loginForm").submit(function() {
      if ($("#loginUsername").val() == "" || $("#loginUsername").val() == " ") {
        alert("Please enter your username!");
        return false;
      }
	   if ($("#loginPassword").val() == "" || $("#loginPassword").val() == " ") {
        alert("Please enter your password!");
        return false;
      }
    });
	
	/*
	 * Logout User (Destroy Session)
	 */
	$("#logoutButton").bind("click", function(){
		self.location.href='logout.php';		
	});
		
	/*
	 * Library
	 */
	$("#menuLibrary").bind("click", function(){
		self.location.href='library.php';
	});
	
	$("#libMain").tabs();
	// $("#accordion").accordion();
	/*
	 * Main Portal
	 */
	$("#userName").bind("click", function(){
		self.location.href='portalMain.php';
	});
	
	/*
	 * reportView
	 */
	$("#reportView").bind("click", function(){
		self.location.href='reportView.php';
	});
}

function prepareSearch(){

	$("#libSearchText").bind('keypress', function(e){
		
		if (e.keyCode == 13){
			getSearchedCases($(this).val());
			getSearchedReports($(this).val());
			getSearchedMedia($(this).val());
		}

	});
}

function getSearchedCases(string){
	
	$("#caseList").empty();
	
	$.ajax({
		type: "GET",
		url: "../controller/readCases.php",
		data: "search="+string,
		
		beforeSend: function(xml){
			$("<div id='caseWaitImage' class='waitImageFrame'>").appendTo("#cases");
		},
		success: function(xml){
			$("#caseWaitImage").remove();
			
			$(xml).find('case').each(function(){
				var id = $(this).find('caseId').text();
			
				$.ajax({
					type: "GET",
					url: "../controller/readCases.php",
					data: "case="+id,
					
					beforeSend: function(xml){
						// doNothin'
					},
					success: function(xml){
						$(xml).find('case').each(function(){
							
							var cid = $(this).find('caseId').text();
							var topic = $(this).find('topic').text();
							var status = $(this).find('caseStatus').text();
							var editor = $(this).find('caseEditor').text();
							var caseEditorId = $(this).find('caseEditorId').text();
							var date = $(this).find('caseLastModified').text();
							
							$("<h3>").html("<a href='#'>"+topic+" von "+editor+" ("+date+")</a>").appendTo("#caseList");
							// $("<div id='caseDivId_"+cid+"'>").html("<p id='caseContent"+cid+"'>"+cid+"</p>").appendTo("#caseList");
							$("<div id='caseDivId_"+cid+"'>").html("<p id='caseContent"+cid+"'></p>").appendTo("#caseList");
							
							if (caseEditorId == $("#editorId").text()){
								$("<p>").html("<button class='libOpenReport' id='case_"+id+"' caseId='"+id+"'>"+$("#caseText1").text()+"</button>").appendTo("#caseContent"+id);
									
								$("#case_"+id).click(function(){
										self.location.href='caseView.php?case='+id;
								}); 
							}
							
							$("<p>").html("<button id='casePDF_"+id+"' class='libOpenReport' >"+$('#mediaText26').text()+"</button>").appendTo("#caseContent"+cid);
							
							$("#casePDF_"+id).click(function(){
								window.open('../controller/pdf.php?case='+id);
							});
							
							$(xml).find('report').each(function(){
								var rId = $(this).find('reportId').text();
								var rHeadline = $(this).find('headline').text();
								var rDiagnosis = $(this).find('diagnosis').text();						
								var rText = $(this).find('reportText').text();
								var rEditor = $(this).find('reportEditor').text();
								var rDate = $(this).find('reportLastModified').text();
								var rStatus = $(this).find('reportStatus').text();
								var reportEditorId = $(this).find('reportEditorId').text();
								
								$("<p class='casePreviewReportHead'>").html(rHeadline+"<br/>"+rDiagnosis+"<br/>"+rEditor+" ("+rDate+") <br/>").appendTo("#caseContent"+cid);
								$("<p id='caseReporttextView"+rId+"'class='casePreviewReportText'>").html("<span>"+rText+"</span>").appendTo("#caseContent"+cid);
								
								if ($("#editorId").text() == reportEditorId){
									
									$("#caseReporttextView"+rId).click(function(){
									$(this).replaceWith("<textarea id='libReportTextEditor"+rId+"' reportid='"+rId+"' class='libReportEdit'>"+$("#caseReporttextView"+rId).text()+"</textarea>");
										$("#libReportTextEditor"+rId).mouseleave(function(){
											$.ajax({
												type: "POST",
												url: "../controller/writeReports.php",
												data: "action=3&reportId="+rId+"&headline="+rHeadline+"&status="+rStatus+"&diagnosis="+rDiagnosis+"&editor="+reportEditorId+"&reportText="+$("#libReportTextEditor"+rId).val(),
												beforeSend: function(xml){
													// wait 
												},
												success: function(xml){
													// remove wait
													$("<div id='reportSavedText'>").html("<p>"+$("#reportText2").text()+"</p>").insertAfter($("#libReportTextEditor"+rId)).fadeIn("slow");
													setTimeout(function(){$("#reportSavedText").fadeOut("slow")}, 5000);
													$("#libReportTextEditor"+rId).mouseenter(function(){
														$("#reportSavedText").remove();
													});
													
												},
												complete: function(xml){
													// Replace the editable Textarea with a static P element containing the edited Text
													// var newText = $("#libReportTextEditor"+id).val();
													// $("#libReportTextEditor"+id).replaceWith("<p id='reportTextId_"+id+"'>"+newText+"</p>");
												}
												
											});
											
										});
									});
									
								}
								
							});
							
							$("<p id='caseMediaArea"+id+"' class='caseMediaArea'>").appendTo("#caseContent"+id);
							$("<p id='caseCommentArea"+id+"' class='caseCommentArea'>").appendTo("#caseContent"+id);
							
							$(xml).find('media').each(function(){
								
								var mid = $(this).find('mediaId').text();
								var mediaType = $(this).find('mediaType').text();
								var tags = $(this).find('tags').text();
							 	var modality = $(this).find('modality').text();
								var organ = $(this).find('organ').text();
								var thumbnail = $(this).find('thumbnail').text();
								var mediaLocator = $(this).find('mediaLocator').text();
								var mediaEditor = $(this).find('mediaEditor').text();
								var uploadDate = $(this).find('uploadDate').text();
								var windowCenter = $(this).find('windowCenter').text();
								var windowWidth = $(this).find('windowWidth').text();
								var laterality = $(this).find('laterality').text();
							 	var imageComment = $(this).find('imageComment').text();
								var contrast = $(this).find('contrast').text();
								var mrAquisitionType = $(this).find('mrAquisitionType').text();
								var sequenceName = $(this).find('sequenceName').text();
								var sliceThickness = $(this).find('sliceThickness').text();
								var kV = $(this).find('kV').text();
								var protocolName = $(this).find('protocolName').text();
								var kernel = $(this).find('kernel').text();
								var mrCoil = $(this).find('mrCoil').text();
								var flipAngle = $(this).find('flipAngle').text();
								var patPos = $(this).find('patPos').text();
								var sens = $(this).find('sens').text();
								var manufacturer = $(this).find('manufacturer').text();
								
								
								$("<a id='caseMediaIcon"+mid+"'class='media' mediaId='"+mid+"' mediaType='"+mediaType+"' media='"+mediaLocator+"' caption='"+modality+organ+"'>").html("<img src='"+thumbnail+"' alt='text'/>").appendTo("#caseMediaArea"+id);
								$("#caseMediaIcon"+mid).bind('click', function(){
									
									switch($(this).attr('mediaType')){
							
										case '0': window.open($(this).attr('media'), 'MIME File'); break; // Unknown MIME
										case '1': showOverlayMovie($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; //MPEG Video
										case '2': showOverlayMovie($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; // AVI Video
										case '3': showOverlayMovie($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; // Other Video
										case '4': showOverlayAudio($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; // MP3 Audio
										case '5': showOverlayAudio($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; // WAV Audio
										case '6': window.open($(this).attr('media'), 'PDF File'); break; // PDF File
										case '7': showOverlayImage($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; // WAV Audio
										
									}
					
								});
								
								
							});
							
							$(xml).find('comment').each(function(){
							
								var commentEditor = $(this).find('commentEditor').text();
								var commentText = $(this).find('commentText').text();
								var commentDate = $(this).find('commentDate').text();
								
								$("<p>").html("<b>"+commentEditor+"</b>: "+commentText+"<br/><i>"+commentDate+"</i>").appendTo("#caseCommentArea"+id);
								
							});
							
						});
						
					},
					complete: function(xml){
						$('#caseList').accordion('destroy').accordion({autoHeight: false, collapsible: true , active: false, header: 'h3'});
					}
				});
				
			});
			
		},
		complete: function(xml){
			// $('#caseList').accordion('destroy').accordion({autoHeight: false, collapsible: true , active: false, header: 'h3'});
		}
		
	});
	
}



function getSearchedReports(string){
	
	$("#accordion").empty();
	
	$.ajax({
		
		type: "GET",
		url: "../controller/readReports.php",
		data: "search="+string,
		
		beforeSend: function(xml){
			$("<div id='reportWaitImage' class='waitImageFrame'>").appendTo("#reports");
		},
		success: function(xml){
			
			$("#reportWaitImage").remove();
			
			$(xml).find('report').each(function(){
				
				var id = $(this).find('reportId').text();
				var headline = $(this).find('headline').text();
				var diagnosis = $(this).find('diagnosis').text();
				var reportText = $(this).find('reportText').text();
				var editor = $(this).find('editor').text();
				var reportEditorId = $(this).find('editorId').text();
				var status = $(this).find('status').text();
				var lastModified = $(this).find('lastModified').text();
				
				$("<h3>").html("<a href='#'>"+headline+" von "+editor+" ("+lastModified+")</a>").appendTo("#accordion");
				$("<div id='reportDivId_"+id+"'>").html("<p class='reportTextDisplay' id='reportTextId_"+id+"'>"+reportText+"</p>").appendTo("#accordion");
				
				$("<p style='color:#FFFFFF;'>").html("<a class='libOpenPDF' href='../controller/pdf.php?report="+id+"' target='_blank' >"+$("#mediaText26").text()+"</a>").appendTo("#reportDivId_"+id);
				$(".libOpenReport").corner();
				$(".libOpenPDF").corner();
				
				if ($("#editorId").text() == reportEditorId){
					
					$("<p>").html("<button class='libOpenReport' id='report_"+id+"' reportId='"+id+"'>"+$("#reportText1").text()+"</button>").appendTo("#reportDivId_"+id);
					$(".libOpenReport").corner();
					
					$("#report_"+id).click(function(){
						self.location.href='reportView.php?report='+id;
					});
					
					$("#reportTextId_"+id).click(function(){
					$(this).replaceWith("<textarea id='libReportTextEditor"+id+"' reportid='"+id+"' class='libReportEdit'>"+$("#reportTextId_"+id).text()+"</textarea>");
						$("#libReportTextEditor"+id).mouseleave(function(){
							$.ajax({
								type: "POST",
								url: "../controller/writeReports.php",
								data: "action=3&reportId="+id+"&headline="+headline+"&status="+status+"&diagnosis="+diagnosis+"&editor="+reportEditorId+"&reportText="+$("#libReportTextEditor"+id).val(),
								beforeSend: function(xml){
									// wait 
								},
								success: function(xml){
									// remove wait
									$("<div id='reportSavedText'>").html("<p>"+$("#reportText2").text()+"</p>").appendTo($("#reportDivId_"+id)).fadeIn("slow");
									setTimeout(function(){$("#reportSavedText").fadeOut("slow")}, 5000);
									$("#libReportTextEditor"+id).mouseenter(function(){
										$("#reportSavedText").remove();
									});
									
								},
								complete: function(xml){
									// Replace the editable Textarea with a static P element containing the edited Text
									// var newText = $("#libReportTextEditor"+id).val();
									// $("#libReportTextEditor"+id).replaceWith("<p id='reportTextId_"+id+"'>"+newText+"</p>");
								}
								
							});
							
						});
					});

				}
			})
			
		},
		complete: function(xml){
			
			$('#accordion').accordion('destroy').accordion({autoHeight: false, collapsible: true , active: false, header: 'h3'});
			
		}
		
		
	});

}
	
function getSearchedMedia(string){
	
	$("#mediaList").empty();
	$("<table id='mediaTable'>").appendTo("#mediaList");
	$("<tr class='mediaRow'>").html(
		"<th></th>"+
		"<th></th>"+
		"<th>"+$("#mediaText1").text()+
		"</th><th>"+$("#mediaText2").text()+
		"</th><th>"+$("#mediaText3").text()+
		"</th><th>"+$("#mediaText4").text()+
		"</th><th>"+$("#mediaText21").text()+
		"</th><th>"+$("#mediaText5").text()+
		"</th><th>"+$("#mediaText6").text()+
		"</th><th>"+$("#mediaText7").text()+
		"</th><th>"+$("#mediaText8").text()+
		"</th><th>"+$("#mediaText9").text()+
		"</th><th>"+$("#mediaText10").text()+
		"</th><th>"+$("#mediaText11").text()+
		"</th><th>"+$("#mediaText12").text()+
		"</th><th>"+$("#mediaText13").text()+
		"</th><th>"+$("#mediaText14").text()+
		"</th><th>"+$("#mediaText15").text()+
		"</th><th>"+$("#mediaText16").text()+
		"</th><th>"+$("#mediaText17").text()+
		"</th><th>"+$("#mediaText18").text()+
		"</th><th>"+$("#mediaText19").text()+
		"</th><th>"+$("#mediaText20").text()+
	"</th>").appendTo("#mediaTable");
	$.ajax({
		
		type: "GET",
		url: "../controller/readMedia.php",
		data: "search="+string,
		
		beforeSend: function(xml){
			
			$("<div id='mediaWaitImage' class='waitImageFrame'>").appendTo("#media");
		
		},
		success: function(xml){
			
			$("#mediaWaitImage").remove();
			
			$(xml).find('media').each(function(){
			 	var id = $(this).find('mediaId').text();
				var mediaType = $(this).find('mediaType').text();
				var tags = $(this).find('tags').text();
			 	var modality = $(this).find('modality').text();
				var organ = $(this).find('organ').text();
				var thumbnail = $(this).find('thumbnail').text();
				var mediaLocator = $(this).find('mediaLocator').text();
				var mediaEditor = $(this).find('mediaEditor').text();
				var mediaEditorId = $(this).find('mediaEditorId').text();
				var uploadDate = $(this).find('uploadDate').text();
				var windowCenter = $(this).find('windowCenter').text();
				var windowWidth = $(this).find('windowWidth').text();
				var laterality = $(this).find('laterality').text();
			 	var imageComment = $(this).find('imageComment').text();
				var contrast = $(this).find('contrast').text();
				var mrAquisitionType = $(this).find('mrAquisitionType').text();
				var sequenceName = $(this).find('sequenceName').text();
				var sliceThickness = $(this).find('sliceThickness').text();
				var kV = $(this).find('kV').text();
				var protocolName = $(this).find('protocolName').text();
				var kernel = $(this).find('kernel').text();
				var mrCoil = $(this).find('mrCoil').text();
				var flipAngle = $(this).find('flipAngle').text();
				var patPos = $(this).find('patPos').text();
				var sens = $(this).find('sens').text();
				var manufacturer = $(this).find('manufacturer').text();
				
				$("<tr class='mediaRow' mediaId='"+id+"' id='libMedia"+id+"'>").html(
				"<td id='deleteFrame"+id+"'></td><td><img media='"+mediaLocator+"' mediaType='"+mediaType+"' mediaId='"+id+"' id='mediaImage"+id+"' src='"+thumbnail+
				"' /></td><td id='mediaTag"+id+"'>"+tags+
				"</td><td id='mediaModality"+id+"'>"+modality+
				"</td><td id='mediaOrgan"+id+"'>"+organ+
				"</td><td>"+uploadDate+
				"</td><td>"+mediaEditor+
				"</td><td>"+windowCenter+
				"</td><td>"+windowWidth+
				"</td><td>"+laterality+
				"</td><td>"+imageComment+
				"</td><td>"+contrast+
				"</td><td>"+mrAquisitionType+
				"</td><td>"+sequenceName+
				"</td><td>"+sliceThickness+
				"</td><td>"+kV+
				"</td><td>"+protocolName+
				"</td><td>"+kernel+
				"</td><td>"+mrCoil+
				"</td><td>"+flipAngle+
				"</td><td>"+patPos+
				"</td><td>"+sens+
				"</td><td>"+manufacturer+
				"</td>").appendTo("#mediaTable");
				
				$("#mediaImage"+id).click(function(){
					
					switch($(this).attr('mediaType')){
							
						case '0': window.open($(this).attr('media'), 'MIME File'); break; // Unknown MIME
						case '1': showOverlayMovie($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; //MPEG Video
						case '2': showOverlayMovie($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; // AVI Video
						case '3': showOverlayMovie($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; // Other Video
						case '4': showOverlayAudio($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; // MP3 Audio
						case '5': showOverlayAudio($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; // WAV Audio
						case '6': window.open($(this).attr('media'), 'PDF File'); break; // PDF File
						case '7': showOverlayImage($(this).attr('media'), "media_"+$(this).attr('mediaId')); break; // WAV Audio
										
					}
					
				});
				
				if(($("#editorId").text() == mediaEditorId) || (mediaEditorId == '9999')){
					
					$("<button class='deleteMediaButton' id='deleteMediaButton"+id+"'></button>").appendTo("#deleteFrame"+id);
					$("#deleteMediaButton"+id).click(function(){
						
						$.ajax({
							type: "POST",
							url: "../controller/writeMedia.php",
							data: "action=1&mediaId="+id+"&editor="+mediaEditorId,
							
							success: function(xml){
								
								$("#libMedia"+id).slideUp("slow");
								// $("<div id='mediaSavedContent'>").html("<p>"+$("#mediaText22").text()+"</p>").insertBefore($("#mediaList")).fadeIn("slow");
								// setTimeout(function(){$("#mediaSavedContent").fadeOut("slow")}, 5000);
								
							}
							
						});
						
					});
					
					$("#libMedia"+id).mouseover(function(){
						$("#deleteMediaButton"+id).fadeIn("fast");
					});
					$("#libMedia"+id).mouseleave(function(){
						$("#deleteMediaButton"+id).fadeOut("fast");
					});
					
					$("#mediaTag"+id).click(function(){
						
						$(this).replaceWith("<input id='mediaTagEdit"+id+"' type='text' class='mediaTextManipulator' value='"+$(this).text()+"'>");
						$("#mediaTagEdit"+id).keypress(function(e){
							if (e.keyCode == 13){ // 13 is the Code for ENTER - no mouseLeave, 'cause the input field is so small
							
								$.ajax({
									type: "POST",
									url: "../controller/writeMedia.php",
									data: "action=2&mediaId="+id+"&editor="+mediaEditorId+"&tags="+$("#mediaTagEdit"+id).val()+"&modality="+modality+"&organ="+organ+"&mediaType="+mediaType,
									
									beforeSend: function(xml){
										// do nothin'
									},
									success: function(xml){
										$("<div id='mediaSavedContent'>").html("<p>"+$("#mediaText22").text()+"</p>").insertBefore($("#mediaList")).fadeIn("slow");
										setTimeout(function(){$("#mediaSavedContent").fadeOut("slow")}, 5000);
									},
									complete: function(xml){
										
									}
									
								});
							}
						});
					
					});
					
					$("#mediaModality"+id).click(function(){
						
						$(this).replaceWith($("#mediaText23").html());
						$("#mediaModalitySelector").attr('id', 'mediaModalitySelector'+id+'');
						// preselect the given Modality
						// $("#mediaModalitySelector"+id+" option[html='"+$(this).text()+"']").attr('selected', 'selected');
						
						$("#mediaModalitySelector"+id).change(function(){
							$.ajax({
								type: "POST",
								url: "../controller/writeMedia.php",
								data: "action=2&mediaId="+id+"&editor="+mediaEditorId+"&tags="+tags+"&modality="+$(this + "option:selected").text()+"&organ="+organ+"&mediaType="+mediaType,
											
								beforeSend: function(xml){
									
								},
								success: function(xml){
									$("<div id='mediaSavedContent'>").html("<p>"+$("#mediaText22").text()+"</p>").insertBefore($("#mediaList")).fadeIn("slow");
									setTimeout(function(){$("#mediaSavedContent").fadeOut("slow")}, 5000);	
								},
								complete: function(xml){
									
								}
								
							});
						});
						
					});
					
					$("#mediaOrgan"+id).click(function(){
					
						$(this).replaceWith($("#mediaText24").html());
						$("#mediaOrganSelector").attr('id', 'mediaOrganSelector'+id+'');
						
						$("#mediaOrganSelector"+id).change(function(){
							
							$.ajax({
								type: "POST",
								url: "../controller/writeMedia.php",
								data: "action=2&mediaId="+id+"&editor="+mediaEditorId+"&tags="+tags+"&modality="+modality+"&organ="+$(this + "option:selected").text()+"&mediaType="+mediaType,
								
								success: function(xml){
									$("<div id='mediaSavedContent'>").html("<p>"+$("#mediaText22").text()+"</p>").insertBefore($("#mediaList")).fadeIn("slow");
									setTimeout(function(){$("#mediaSavedContent").fadeOut("slow")}, 5000);	
								}
								
							});
							
						});
						
					});
					
				}
			 });
			
		},
		complete: function(xml){
			
		}
		
	});
	
}

function resizeWindow(){
	
	/*
	 * Get Browser Window Data
	 */
	if (window.innerHeight){
		// Standard Browser Height
		var height = window.innerHeight;
	} else {
		// Internet Explorer "standardconform mode" Height
		var height = document.documentElement.clientHeight;
	}
	
	if (window.innerWidth){
		// Standard Browser Height
		var width = window.innerWidth;
	} else {
		// Internet Explorer "standardconform mode" Height
		var width = document.documentElement.clientWidth;
	}
	
	/*
	 * Resize Element mainMenu
	 */
	var menu = document.getElementById("mainMenu");
	menu.style.left = "0";
	menu.style.top = "0";
	menu.style.width = width + "px";
	
	/*
	 * Resize Library Tabs
	 */
	// $("#libMain").css(('height', height-35) + 'px');
	// $("#libMain").css(('height', height-35) + 'px');
	var mh = height - 126;
	$("#media").css('height', mh);
}


function showOverlayImage(pointer, id){

	$("<div id='imageView'>").html("<span />").appendTo("#overlayDiv");
	$("<p>").html("<img class='insertedImage' id='"+id+"' src='"+pointer+"' />").appendTo("#imageView");
	
	$("#imageView").bind('click', function(){
		
		$("#imageView").fadeOut("fast");
		$("#imageView").empty();
		$("#imageView").remove();
	
	});
	
	$("#imageView").fadeIn("fast");	
	
	/*
	 * Resize Image corresponding to the imageView
	 * rezise
	 */
	var imgWidth = $("#"+id).width();
	var imgHeight = $("#"+id).height();
	var overlayWidth = $("#imageView").width();
	var overlayHeight = $("#imageView").height();
	
	if (imgWidth > imgHeight){
		// Landscape image
		// calculate img / div ratio
		var ratio = overlayWidth / imgWidth;
		$("#"+id).width((imgWidth * ratio)-100);
		$("#"+id).height((imgHeight * ratio)-100);
		$("#"+id).css('margin-left', '50px');
		$("#"+id).css('margin-top', '50px');
		
	} else {
		// Portrait Image
		var ratio = overlayHeight / imgHeight;
		$("#"+id).width((imgWidth * ratio)-100);
		$("#"+id).height((imgHeight * ratio)-100);
		$("#"+id).css('margin-left', '50px');
		$("#"+id).css('margin-top', '50px');
		
	}
	
	/*
	 * Control Board
	 */

	
}

function showOverlayMovie(pointer, id){
	
	$("<div id='mediaView'>").html("<span />").appendTo("#overlayDiv");
	$("<p class='insertedMediaFrame'>").html("<embed class='insertedMedia' id='"+id+"' src='"+pointer+"' autostart='true' loop='true' />").appendTo("#mediaView");

	/*var embedHeight = $(".insertedMedia").height();
	 *var embedWidth = $("#"+id).width();
	 *var embedHeight = embedHeight/2;
	 *var embedWidth = embedWidth/2;

	 *var overlayHeight = $("#mediaView").height();
	 *var overlayWidth = $("#mediaView").width();
	
	  *var left = parseFloat((overlayWidth - (embedWidth))/2-200).toFixed(0); // -200 is a dummy value because I couldn't select the embed size
	  *var top =  parseFloat((overlayHeight - (embedHeight))/2-200).toFixed(0); // -200 is a dummy value because I couldn't select the embed size
	
	  *$("#"+id).css('margin-left', left+"px");
	  *$("#"+id).css('margin-top', top+"px");
	  */
	
	 
	
	$("#mediaView").bind('click', function(){
		
		$("#mediaView").fadeOut("fast");
		$("#mediaView").empty();
		$("#mediaView").remove();
	
	});
	
	$("#mediaView").fadeIn("fast");	

}

function showOverlayAudio(pointer, id){
	
	$("<div id='mediaView'>").html("<span />").appendTo("#overlayDiv");
	$("<p>").html("<embed class='insertedMedia' id='"+id+"' src='"+pointer+"' autostart='true' loop='false' />").appendTo("#mediaView");

	var embedHeight = $(".insertedMedia").height();
	var embedWidth = $("#"+id).width();
	var embedHeight = embedHeight/2;
	var embedWidth = embedWidth/2;

	var overlayHeight = $("#mediaView").height();
	var overlayWidth = $("#mediaView").width();
	
	var left = parseFloat((overlayWidth - (embedWidth))/2-200).toFixed(0); // -200 is a dummy value because I couldn't select the embed size
	var top =  parseFloat((overlayHeight - (embedHeight))/2-200).toFixed(0); // -200 is a dummy value because I couldn't select the embed size
	
	$("#"+id).css('margin-left', left+"px");
	$("#"+id).css('margin-top', top+"px");
	
	$("#mediaView").bind('click', function(){
		
		$("#mediaView").fadeOut("fast");
		$("#mediaView").empty();
		$("#mediaView").remove();
	
	});
	
	$("#mediaView").fadeIn("fast");	

}